<template>
	<view class="comment">
		<input type="text" placeholder="发表一条精彩的评论" v-model="comment">
		<button @click="setComment" class="comment-btn">发表</button>
		<button @click="setLike">👍</button>
	</view>
</template>

<script>
	import {isLogin} from "../../utils/isLogin.js"
	import {http} from "../../utils/request.js"
	export default {
		name:"Commit",
		props : ["Id","commitAPI","supportAPI"],
		data() {
			return {
				comment : ""
			}
		},
		methods : {
			// 发表评论
			setComment() {
				// 判断是否登录
				const that = this
				if (isLogin()) {
					if (this.comment != "") {
						http({
							url: this.commitAPI,
							method: "post",
							data: {
								activityId: this.Id,
								newsId: this.Id,
								content: this.comment
							}
						}).then((res) => {
							if (res.data.code == 200) {
								uni.showToast({
									icon: "success",
									title: "发表成功"
								})
								that.comment = ""
								// 通知父组件更新视图
								that.$emit("setNotice")
							}
						})
					} else {
						uni.showToast({
							icon: "error",
							title: "请输入内容"
						})
					}
				}
			
			},
			// 提交文章点赞
			setLike() {
				// 判断是否登录
				const that = this
				if (isLogin()) {
					http({
						url: this.supportAPI + this.Id,
						method: "put"
					}).then((res) => {
						console.log(res)
						// 判断是否成功
						if (res.data.code == 200) {
							uni.showToast({
								icon: "success",
								title: "点赞成功"
							})
							that.comment = ""
							// 通知父组件更新视图
							that.$emit("setNotice")
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
/* 评论框 */
	.comment {
		display: flex;
		justify-content: space-between;
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	.comment>input {
		flex: 80%;
		height: 3em;
		text-indent: 2em;
		background-color: #e7e8e8;
		border-radius: 5px;
	}

	.comment-btn {
		flex: 20%;
	}

	.comment>button {
		border: 5px;
	}
</style>